<template>
    <div class="xmlBox" style="height:100%;" v-loading="loading" element-loading-text="XML转换中，请稍等...">
        <div class="left">
            <div class="title">
                <h4>编辑器</h4>
                <div class="btn" @click="toTransXml">
                    <span>转XML</span>
                </div>
            </div>
            <QuillEditor contentType="html" v-model:content="content" :options="toolbarOptions" />
        </div>
        <div class="right">
            <div class="title">
                <h4>XML编辑器</h4>
            </div>
            <!-- <div v-html="getXmlCon"></div> -->
            <!-- <div v-text="getXmlCon"></div> -->
            <Code :code="getXmlCon" :readonly="true" />
        </div>
    </div>
</template>
<script setup>
import { QuillEditor, Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import UserApi from '@/api/user'
import { ref } from 'vue'
// import Code from '@/components/code-mirror/index.vue'
import Code from '@/components/code-vue3-mirror/index.vue'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], //引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: 'ordered' }, { list: 'bullet' }], //列表
  [{ script: 'sub' }, { script: 'super' }], // 上下标
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ direction: 'rtl' }], // 文本方向

  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ font: [] }], //字体
  [{ align: [] }], //对齐方式

  ['clean'], //清除字体样式
  ['image', 'video'] //上传图片、上传视频
]

const content = ref('')
const getXmlCon = ref('')

const loading = ref(false)

// const toTransXml = () => {
//   loading.value = true
//   UserApi.transXml({ info: content.value })
//     .then((res) => {
//       if (res.code == 200) {
//         getXmlCon.value = res.data
//       }
//     })
//     .finally(() => {
//       loading.value = false
//     })
// }

// 1. 创建一个新的WebSocket对象，连接到指定的URL  
const ws = new WebSocket('wss://u414804-8075-f00fd168.westc.gpuhub.com:8443/ws/demo/');

// 2. 监听WebSocket事件  

// 当连接打开时  
ws.onopen = function (event) {
  console.log('Connection opened', event);
  // 连接打开后，你可以发送一个消息到服务器
};

const toTransXml = () => {
  getXmlCon.value = ''
  ws.send(JSON.stringify({ info: content.value }))
}

// 当从服务器收到消息时  
ws.onmessage = function (event) {
  getXmlCon.value += event.data;
  console.log('Received:', event.data);
};

// 当连接出错时  
ws.onerror = function (error) {
  console.error('WebSocket Error:', error);
};

// 当连接关闭时  
ws.onclose = function (event) {
  if (event.wasClean) {
    console.log('Connection closed cleanly, code:', event.code, 'reason:', event.reason);
  } else {
    console.error('Connection died');
  }
};

// 4. 关闭连接（可以在适当的时候调用）
// ws.close();
</script>
<style lang="sass" scoped>
.xmlBox
    display: flex
    background-color: #f3f3f3
    .left
        margin-right: 20px
        background: white
        margin: 20px
        border-radius: 6px
        padding: 10px
        margin-right: 0
        width: 50%
    .right
        width: 50%
        background: white
        margin: 20px
        border-radius: 6px
        padding: 10px
        overflow-y: scroll
        .title
            padding: 17px 0
    .title
        display: flex
        justify-content: space-between
        align-items: center
        padding: 10px 0
        .btn
            display: flex
            justify-content: center
            align-items: center
            cursor: pointer
            width: 50px
            width: 80px
            height: 34px
            background: #165DFF
            border-radius: 6px
            color: white
</style>
<style>
.ql-container {
  height: calc(100% - 100px) !important;
}
</style>